<template>
	<view class="header">
		<h3 class="name">美妆汇</h3>
	</view>
	<view class="banner">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<image :src=item.img mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="promotion">
		<view class="type01">
			<text>促销商品</text>
		</view>
		<view class="time">

		</view>
		<view class="proGoods">
			<ul>
				<li v-for="(goods, index) in proGoods" :key="index" @click="detailFn()">
					<view class="photo">
						<image :src=goods.img mode=""></image>
					</view>
					<view class="introduceBox">
						<p class="storeName">{{goods.storeName}}</p>
						<view class="introduce">{{goods.intro}}</view>
						<view class="money">
							<text class="ori">¥</text>
							<text class="oriPrice">{{goods.oriPrice}}</text>
							<text class="pre">¥</text>
							<text class="prePrice">{{goods.prePrice}}</text>
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
	<view class="recommend">
		<view class="type02">
			<text>最近评论</text>
		</view>
		<view class="commentBox">
			<ul>
				<li v-for="(item02, index) in comment" :key="index">
					<view class="user">
						<view class="left">
							<image :src=item02.img mode=""></image>
						</view>
						<view class="right">
							<p>{{item02.name}}</p>
							<view class="state">
								<text>肤质: </text>
								<text>{{item02.state}}</text>
							</view>
						</view>
					</view>
					<view class="comment" @click="detailFn()">
						<view class="comment-left">
							<image :src=item02.goodsPic mode=""></image>
						</view>
						<view class="comment-right">
							<view class="remask">
								{{item02.remask}}
							</view>
							<view class="score">
								<uni-rate :readonly="true" :value="4" size="18" active-color="#ecb7bb" />
								<text>4.0</text>
							</view>
							<view class="like">
								<image src="../../static/Icon_Wishlist.png" mode=""></image>
							</view>
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				banner: [{
					id: 1,
					img: "../../static/banner05.png",

				}, {
					id: 2,
					img: "../../static/banner02.png",

				}, {
					id: 3,
					img: "../../static/banner03.png",

				}, {
					id: 4,
					img: "../../static/banner04.png",

				}],
				proGoods: [{
					img: "../../static/goods02.jpg",
					storeName: "橘朵",
					intro: "橘朵灵光唇膏水光口红镜面保湿滋养唇蜜显白唇彩",
					oriPrice: 69.8,
					prePrice: 49.8
				}, {
					img: "../../static/meibi01.jpg",
					storeName: "稚优泉",
					intro: "稚优泉极细眉笔平价防水持妆不易脱色自然野生眉初学者旗舰店正品",
					oriPrice: 49.8,
					prePrice: 39.8
				}, {
					img: "../../static/kouhonh01.jpg",
					storeName: "珂拉琪",
					intro: "Colorkey珂拉琪水雾唇露唇釉女唇彩口红女不易沾杯",
					oriPrice: 125.0,
					prePrice: 79.8
				}, {
					img: "../../static/fendi02.png",
					storeName: "珂拉琪",
					intro: "彩棠TIMAGE持妆粉底液不易脱妆",
					oriPrice: 69.8,
					prePrice: 39.8
				}],
				comment: [{
					img: "../../static/touxiang01.png",
					name: "小唯",
					state: "油性、痤疮、毛孔粗大",
					goodsPic: "../../static/fendi01.png",
					remask: "质地很好，因为覆盖率是中等到高，我喜欢!!!"
				}, {
					img: "../../static/user-photo02.jpg",
					name: "蜡笔小新",
					state: "油性、痤疮、毛孔粗大",
					goodsPic: "../../static/fendi02.png",
					remask: "质地很好，因为覆盖率是中等到高，我喜欢!!!"
				}, {
					img: "../../static/touxiang03.png",
					name: "蜡笔小新",
					state: "油性、痤疮、毛孔粗大",
					goodsPic: "../../static/fendi03.png",
					remask: "质地很好，因为覆盖率是中等到高，我喜欢!!!"
				}]
			};
		},
		methods: {
			detailFn(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.header {
		width: 100%;
		height: 52px;
		line-height: 50px;
		text-align: center;
		box-shadow: 1px 1px 10px #f0f0f0;

		.name {
			font-size: 22px;
			font-weight: 600;
			font-family: 华文中宋;
			// color: #dd5d79;
			color: #eba9ae;
			margin: 0 auto;
		}
	}

	.banner {
		width: 100%;
		height: 180px;
		margin-top: 10px;

		swiper {
			width: 96%;
			height: 100%;
			margin: 0 auto;
			border-radius: 10px;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 10px;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
		}
	}

	.promotion {
		width: 96%;
		height: 260px;
		margin: 0 auto;
		margin-top: 10px;
		// background-color: palegoldenrod;

		.type01 {
			padding: 6px 0;

			text {
				font-size: 18px;
			}
		}

		.proGoods {
			width: 100%;
			height: 208px;
			overflow: scroll;
			margin-top: 6px;
			// background-color: #eaeaea;
			// box-shadow: 0px 6px 10px #eaeaea;


			ul {
				width: fit-content;
				height: 99%;
				// background-color: palegreen;
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-wrap: nowrap;

				li {
					width: 130px;
					height: 90%;
					padding: 8px;
					margin-right: 12px;
					background-color: #fff;
					// border: 1px solid #ccc;
					box-shadow: 2px 4px 10px #e1e1e1;
					border-radius: 6px;

					.photo {
						width: 100%;
						height: 120px;

						image {
							width: 100%;
							height: 100%;
							border-radius: 6px;
						}
					}

					.introduceBox {
						// background-color: palegoldenrod;

						.storeName {
							font-size: 12px;
							margin-top: 4px;
							color: #a2a2a2;
						}

						.introduce {
							font-size: 14px;
							margin-top: 4px;
							width: 130px;
							/* 设置宽度 */
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 省略号 */
						}

						.money {
							margin-top: 2px;

							.ori {
								font-size: 13px;
								color: #a2a2a2;
							}

							.oriPrice {
								font-size: 14px;
								color: #a2a2a2;
								text-decoration: line-through;
							}

							.pre {
								font-size: 16px;
								margin-left: 6px;
							}

							.prePrice {
								font-size: 17px;
							}
						}
					}
				}
			}
		}
	}

	.recommend {
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;

		.type02 {
			padding: 6px 0;

			text {
				font-size: 18px;
			}
		}

		.commentBox {
			width: 100%;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				li {
					border-bottom: 1px solid #dededf;
					margin-top: 12px;
					height: 160px;

					.user {
						width: 100%;
						height: 50px;
						display: flex;
						align-items: center;
						margin-top: 20px;
						// background-color: palegoldenrod;

						.left {
							margin-right: 10px;
							// background-color: paleturquoise;

							image {
								width: 44px;
								height: 44px;
								border-radius: 50%;
							}
						}

						.right {

							// background-color: palevioletred;
							p {
								font-size: 15px;
								margin-top: -5px;
							}

							.state {
								font-size: 12px;
								color: #a2a2a2;
								margin-top: 2px;
							}
						}
					}

					.comment {
						width: 100%%;
						height: 100px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// background-color: palegreen;

						.comment-left {
							width: 76px;
							height: 76px;
							border: 2px solid #ccc;
							border-radius: 6px;
							// background-color: paleturquoise;

							image {
								width: 100%;
								height: 100%;
								border-radius: 6px;
							}
						}


						.comment-right {
							width: 74%;
							height: 90px;
							position: relative;
							// background-color: palevioletred;

							.remask {
								width: 200px;
								font-size: 13px;
								margin-top: 10px;
							}

							.score {
								margin-top: 16px;
								display: flex;
								// background-color: palegoldenrod;

								text {
									margin-left: 8px;
									font-size: 14px;
									color: #ccc;
								}
							}

							.like {
								width: 26px;
								height: 25px;
								// background-color: palegoldenrod;
								position: absolute;
								right: 16px;
								top: 58px;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	// 隐藏横向滚动条
	::-webkit-scrollbar {
		display: none;
	}
</style>